<template>
	<view class="content">

		<view class="head">
			<u-dropdown>
				<u-dropdown-item v-model="value1" title="综合排序" :options="options1"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="全国" :options="options2"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="筛选" :options="options2"></u-dropdown-item>
			</u-dropdown>
		</view>

		<view class="box1">

			<view class="img1" style="padding-top: 2%;">
				<image src="../../static/img/erket.svg" mode="" style="width: 40px; height: 40px;"></image>
			</view>

			<view class="text1" style="margin-left: 19%; margin-top: -9%;">
				<text>儿科</text>
			</view>

			<view class="text2" style="margin-left: 19%; margin-top: 2%;">
				<text style="font-size: 12px; color: #999999; line-height: 20px;">小儿发烧、咳嗽、哮喘、流鼻涕、拉肚子、黄疸、母乳喂养、辅食、营养不良、生发生育、先天性疾病、疫苗接种、发育迟缓、儿童用药等问题。</text>
			</view>

		</view>

		<view class="con">
			<text>为您推荐 258 位医生</text>
		</view>

		<view class="box2">

			<view class="item" v-for="(item,index)  in indexList" :key="index" >

				<view class="main">

					<view class="mon" style="color: #2B85E4; margin-left: 75%; font-size: 10px;">{{item.mon}}</view>
					<view class="title">{{item.title}}</view>
					<view class="type" >{{item.type}}</view>
					<view class="shanc" >{{item.shanc}}</view>
					<view class=".delivery-time" style="font-size: 10px;"> <image src="../../static/img/xingxing.png" style="width: 15px; height: 15px; top: 3px;"></image>{{ item.cont }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.answer }}个回答</view>
					<view class="cytime">
						<text>{{item.xiangy}}</text>
						<text>{{item.congye}}</text>
						<text>{{item.zhuangjia}}</text>
					</view>


				</view>

				<view class="leftimg">
					<image :src="item.src" mode="circle"></image>
				</view>
			</view>
		</view>


	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexList: [{
						src: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2903226154,3189909077&fm=26&gp=0.jpg',
						title: '叶盛  副主任医师',
						type: '儿科  浙江大学医学附属儿童医院',
						shanc: '擅长：儿科危重症、发热/咳嗽、呕吐/腹泻、....',
						cont: '5.0',
						answer: '246',
						xiangy:'  平均响应：1小时',
						congye:'从业20年',
						zhuangjia: '行业专家',
						mon:'￥399.00'

					},
					{
						src: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2903226154,3189909077&fm=26&gp=0.jpg',
						title: '叶盛  副主任医师',
						type: '儿科  浙江大学医学附属儿童医院',
						shanc: '擅长：儿科危重症、发热/咳嗽、呕吐/腹泻、....',
						cont: '5.0',
						answer: '246',
						xiangy:'  平均响应：1小时',
						congye:'从业20年',
						zhuangjia: '行业专家',
						mon:'￥399.00'
					},
					{
						src: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2903226154,3189909077&fm=26&gp=0.jpg',
						title: '叶盛  副主任医师',
						type: '儿科  浙江大学医学附属儿童医院',
						shanc: '擅长：儿科危重症、发热/咳嗽、呕吐/腹泻、....',
						cont: '5.0',
						answer: '246',
						xiangy:'  平均响应：1小时',
						congye:'从业20年',
						zhuangjia: '行业专家',
						mon:'￥399.00'
					},
					{
						src: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2903226154,3189909077&fm=26&gp=0.jpg',
						title: '叶盛  副主任医师',
						type: '儿科  浙江大学医学附属儿童医院',
						shanc: '擅长：儿科危重症、发热/咳嗽、呕吐/腹泻、....',
						cont: '5.0',
						answer: '246',
						xiangy:'  平均响应：1小时',
						congye:'从业20年',
						zhuangjia: '行业专家',
						mon:'￥399.00'
					},





				]
			}
		}
	}
</script>

<style>
	page {
		background-color: #F4F4F5;
	}

	.content {
		width: 100%;
	}

	.head {
		width: 100%;
		background-color: #FFFFFF;
		margin-top: 1%;
	}

	.box1 {
		width: 100%;
		height: 122px;
		background-color: #FFFFFF;
		margin-top: 1%;
	}

	.con {
		width: 160px;
		line-height: 190%;
		margin-left: 3%;
		font-size: 13px;
		margin-top: 2%;
	}

	.box2 {
		width: 100%;
		height: 500px;
	}

	.item {
		width: 100%;
		height: 150px;
		background-color: #FFFFFF;
		margin: 3px;
		
	}
	.main {
		margin-left: 20%;
		padding-top: -1%;
		line-height: 23px;
		
	}
	.type{
		font-size: 11px;
		color: #909399;
	}
	.title{
		font-size: 13px;
	}
	.shanc{
		font-size: 11px;
		color: #909399;
	}
	
	.leftimg{
		margin-top: -30%;
		
	}
	
	image{
		width: 60rpx;
		height: 60rpx;
		border-radius: 50rpx;
		margin-left: 5%;
	
	}
	
	 .cytime text {
		
		border: 1px solid #2B85E4;
		border-radius: 16px;
		margin: 19px;
		margin-left: 0%;
		color: #2B85E4;
		font-size: 11px;
	}
	
</style>
